<template>
	<view class="container">
		<!-- 3D模型容器 -->
		<!-- 在template中修改图标容器结构 -->
		<c-3d-model ref="modelRef" :height="height" :src='src' :environmentSrc='environmentSrc'
			:decoderPath='decoderPath' :autoRotate='autoRotate' :modelScale="modelScale" :ambientLight='2'
			@loaded='onLoaded'></c-3d-model>
		<!-- 在3D容器内添加控制按钮 -->
		<view class="model-controls">
			<view class="rotate-icon" @click="toggleAutoRotate">
				<image src="@/static/360.png" mode="aspectFit" :class="{ rotating: autoRotate }"></image>
			</view>
		</view>
		<!-- 可拖拽介绍面板 -->
		<view class="draggable-panel" :style="{ height: panelHeight + 'px' }" @touchstart="handleTouchStart"
			@touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<view class="drag-handle" v-if="panelHeight > minHeight"></view>

			<view class="panel-content">
				<view class="title">抗战时期黑色皮背包</view>
				<view class="description">抗日战争时期周飞在建岱米店联络点使用的黑色皮背包
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="label">中文名：&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;抗战时期黑色皮背包</text>
					</view>
					<view class="info-item">
						<text class="label">馆藏地点：    &nbsp; &nbsp;&nbsp;宁波市海曙区章水镇樟村村</text>
					</view>
					<view class="info-item">
						<text class="label">所属年代：    &nbsp;&nbsp;&nbsp;&nbsp;近现代</text>
					</view>
					<view class="info-item">
						<text class="label">所属博物馆：&nbsp;&nbsp;宁波樟村四明山革命烈士纪念馆</text>
					</view>
					<view class="info-item">
						<text class="label">所属地区：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;浙江宁波</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 展开按钮 -->
		<view class="expand-btn" :class="{ 'btn-hidden': panelHeight !== minHeight }" @click="expandPanel">
			<text class="arrow-icon">↑</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch,
		onUnmounted
	} from 'vue';

	// 3D模型参数
	const height = ref('85vh');
	const autoRotate = ref(false);
	const decoderPath = ref('https://cloud.vuedata.wang/draco/');
	const modelScale = ref([2, 2, 2]);
	const src = ref('http://st65v2uic.hd-bkt.clouddn.com/llhzf.glb');
	// const isCenter = ref(true);
	const environmentSrc = ref('/static/yyyy.hdr');
	const modelRef = ref(null);
	// 面板参数
	const panelHeight = ref(300);
	const startY = ref(0);
	const startHeight = ref(0);
	const windowHeight = ref(0);
	const minHeight = 120; // 最小高度
	const maxHeight = ref(400); // 最大高度


	//3d模型方法

	const playAnimation = () => {
		modelRef.value?.playAnimation(0);
	};

	const stopAnimation = () => {
		modelRef.value?.stopAnimation(0);
	};

	const toggleAutoRotate = () => {
		autoRotate.value = !autoRotate.value
	}
	// #ifndef MP


	const setEnvironment = (env) => {
		environmentSrc.value = env;
	};

	onUnmounted(() => {
		modelRef.value?.dispose?.();
	});
	// 基础 方法
	onMounted(() => {
		uni.getSystemInfo({
			success: (res) => {
				windowHeight.value = res.windowHeight;
				maxHeight.value = res.windowHeight * 0.6;
				panelHeight.value = Math.min(300, maxHeight.value);
			}
		});
	});

	const handleTouchStart = (e) => {
		startY.value = e.touches[0].clientY;
		startHeight.value = panelHeight.value;
		e.preventDefault();
	};

	const handleTouchMove = (e) => {
		e.preventDefault();
		const currentY = e.touches[0].clientY;
		const deltaY = currentY - startY.value;
		let newHeight = startHeight.value - deltaY;

		newHeight = Math.max(minHeight, Math.min(newHeight, maxHeight.value));
		panelHeight.value = newHeight;
	};

	const handleTouchEnd = () => {
		if (panelHeight.value < minHeight + 50) {
			panelHeight.value = minHeight;
		} else if (panelHeight.value > maxHeight.value * 0.8) {
			panelHeight.value = maxHeight.value;
		}
	};

	const expandPanel = () => {
		panelHeight.value = maxHeight.value;
	};

	const onLoaded = () => {
		console.log('3D模型加载完成');
	};
	const handleDoubleTap = () => {
		if (panelHeight.value === minHeight) {
			expandPanel();
		} else {
			panelHeight.value = minHeight;
		}
	}
</script>

<style lang="scss" scoped>
	.model-controls {
		position: absolute;
		z-index: 100;
		pointer-events: auto;

		.rotate-icon {
			position: fixed;
			left: 30rpx;
			bottom: 300rpx; // 根据面板高度调整
			// width: 80rpx;
			// height: 80rpx;
			// background: rgba(0, 0, 0, 0.6);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			backdrop-filter: blur(10rpx);
			transition: all 0.3s ease;
			// border: 2rpx solid rgba(255, 255, 255, 0.2);

			// 调大尺寸
			width: 100rpx; // 原80rpx
			height: 100rpx; // 原80rpx
			// 修改背景色
			background: rgba(255, 255, 255, 0.1) !important;
			// 添加阴影增强立体感
			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
			// 调整边框颜色
			border: 2rpx solid rgba(172, 4, 3, 0.1);

			image {
				width: 100%;
				height: 100%;
				// filter: invert(1);
				filter: none !important;

			}

			&.rotating {
				// 旋转状态背景色
				background: rgba(172, 4, 3, 0.9) !important;
				// 添加旋转状态阴影
				box-shadow: 0 8rpx 20rpx rgba(172, 4, 3, 0.3);

				image {
					// 旋转时恢复白色图标
					filter: invert(1) !important;
				}
			}

			// &.rotating {
			// 	background: rgba(172, 4, 3, 0.8);

			// 	image {
			// 		animation: rotate 8s linear infinite;
			// 	}
			// }

			&:active {
				transform: scale(0.9);
			}
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	// 在媒体查询中添加响应式调整
	@media (max-width: 768px) {
		.model-controls .rotate-icon {
			bottom: 240rpx;
			width: 80rpx;
			height: 80rpx;
			left: 20rpx;
		}
	}

	.container {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	.draggable-panel {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(247, 231, 205, 0.98);
		backdrop-filter: blur(20px);
		border-radius: 24rpx 24rpx 0 0;
		box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.15);
		transition: height 0.3s cubic-bezier(0.33, 1, 0.68, 1);
		touch-action: none;
		z-index: 1000;
		min-height: 120px;

		.drag-handle {
			padding: 20rpx 0;

			&::after {
				content: '';
				display: block;
				width: 100rpx;
				height: 8rpx;
				background: rgba(172, 4, 3, 0.3);
				border-radius: 4rpx;
				margin: 0 auto;
			}
		}
	}

	.panel-content {
		padding: 30rpx 40rpx 120rpx;
		height: calc(100% - 60rpx);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.expand-btn {
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 80rpx;
		background: #AC0403;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 10rpx 30rpx rgba(172, 4, 3, 0.3);
		transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
		z-index: 1001;

		.arrow-icon {
			color: #FFF3B0;
			font-size: 50rpx;
			transform: translateY(-2rpx);
			transition: transform 0.3s ease;
		}

		&.btn-hidden {
			opacity: 0;
			transform: translateX(-50%) scale(0);
			pointer-events: none;
		}

		&:active {
			transform: translateX(-50%) scale(0.9);
		}
	}

	/* 信息样式保持原有设计 */
	.title {
		font-size: 44rpx;
		color: #AC0403;
		font-weight: bold;
		margin-bottom: 30rpx;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: -10rpx;
			left: 0;
			width: 80rpx;
			height: 4rpx;
			background: #AC0403;
		}
	}

	.info-item {
		display: flex;
		align-items: center;

		.label {
		
			color: #666;
			font-size: 28rpx;
			font-weight: 500;
		}

		.value {
			flex: 1;
			color: #333;
			font-size: 32rpx;
			line-height: 1.4;
		}
	}

	.description {
		margin-top: 40rpx;
		color: #666;
		font-size: 28rpx;
		line-height: 1.6;
		margin-bottom: 40rpx;

	}

	@media (max-width: 768px) {
		.panel-content {
			padding: 20rpx 30rpx 100rpx;
		}

		.expand-btn {
			bottom: 40rpx;
			width: 70rpx;
			height: 70rpx;

			.arrow-icon {
				font-size: 40rpx;
			}
		}

		.title {
			font-size: 36rpx;

			&::after {
				width: 60rpx;
			}
		}

		.info-item {
			flex-direction: column;
			align-items: flex-start;

			.label {
				margin-bottom: 8rpx;
			}
		}

		.description {
			font-size: 26rpx;
		}

		.expand-btn::after {
			content: "上划或者展开";
			position: absolute;
			top: -60rpx;
			color: #AC0403;
			font-size: 24rpx;
			white-space: nowrap;
			animation: float 2s infinite;
		}

		@keyframes float {

			0%,
			100% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(-10rpx);
			}
		}

	}
</style>